<!-- 新增/编辑弹窗页面 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" :title="typeTitle" width="960px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-row>
        <px-col :span="12">
          <px-form-item label="备件类型" prop="eqpTypeCodeDesc">
            <px-input v-model="formValue.eqpTypeCodeDesc" placeholder="自动带出备件类型" disabled />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="归属地块" prop="facCode">
            <px-select v-model="formValue.facCode" placeholder="请选择归属地块" filterable clearable @change="formValue.positionCode = ''">
              <px-option v-for="item in facCodeList" :key="item.id" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="备件名称" prop="sparePartName">
            <px-input v-model="formValue.sparePartName" placeholder="请输入备件名称" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="规格型号" prop="specification">
            <px-input v-model="formValue.specification" placeholder="请输入规格型号" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="存放位置" prop="positionCode">
            <px-input v-model="formValue.positionCode" placeholder="请输入存放位置" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="安全库存" prop="safeStock">
            <px-input-number v-model="formValue.safeStock" placeholder="请输入安全库存" :max="9999" :min="1" maxlength="50" />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="品牌" prop="brandVal">
            <px-input v-model="formValue.brandVal" placeholder="请输入品牌" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="单位" prop="sparePartUnit">
            <px-input v-model="formValue.sparePartUnit" placeholder="请输入单位" maxlength="50" clearable />
          </px-form-item>
        </px-col>
      </px-row>
    </px-form>
    <div style="margin-top: 56px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import { PxMessage } from "px-ui";
import { queryDictData } from "@/api/common";
import { queryEquipPositionTree, addSparePartsLedger, editSparePartsLedger } from "@/api/erc/spareParts";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "dialogType", "rowData", "eqpTypeCode", "eqpTypeCodeDesc"]);

const visible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增备件",
  formValue: {
    eqpTypeCode: "",
    eqpTypeCodeDesc: "",
    facCode: "",
    sparePartName: "",
    specification: "",
    positionCode: "",
    safeStock: 1,
    brandVal: "",
    sparePartUnit: ""
  },
  facCodeList: []
});
const { typeTitle, formValue, facCodeList } = toRefs(state);

// 表单校验规则
const rules = computed(() => ({
  facCode: [{ required: true, message: "归属地块不能为空", trigger: "change" }],
  sparePartName: [{ required: true, message: "备件名称不能为空", trigger: "blur" }],
  specification: [{ required: true, message: "规格型号不能为空", trigger: "blur" }],
  positionCode: [{ required: true, message: "存放位置不能为空", trigger: "change" }],
  safeStock: [{ required: true, message: "安全库存不能为空", trigger: "blur" }]
}));

// 归属地块下拉框
const querySelectList = async () => {
  facCodeList.value = await queryDictData({ typeCode: "ERC_FACTORY_AREA" });
};
// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  await querySelectList();
  if (props.dialogType === "add") {
    typeTitle.value = "新增备件";
    formValue.value.eqpTypeCode = props.eqpTypeCode;
    formValue.value.eqpTypeCodeDesc = props.eqpTypeCodeDesc;
    delete formValue.value.id;
  } else if (props.dialogType === "edit") {
    typeTitle.value = "编辑备件";
    const rowData = JSON.parse(JSON.stringify(props.rowData));
    const { id, eqpTypeCode, eqpTypeCodeDesc, facCode, sparePartName, specification, positionCode, safeStock, brandVal, sparePartUnit } = rowData;
    formValue.value.id = id;
    formValue.value.eqpTypeCode = eqpTypeCode;
    formValue.value.eqpTypeCodeDesc = eqpTypeCodeDesc;
    formValue.value.facCode = facCode;
    formValue.value.sparePartName = sparePartName;
    formValue.value.specification = specification;
    formValue.value.positionCode = positionCode;
    formValue.value.safeStock = safeStock;
    formValue.value.brandVal = brandVal;
    formValue.value.sparePartUnit = sparePartUnit;
  }
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {};
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const params = formValue.value;
      if (props.dialogType === "add") {
        await addSparePartsLedger(params);
        PxMessage.success("新增成功");
        emits("closeDialog");
        emits("queryTable");
      } else if (props.dialogType === "edit") {
        await editSparePartsLedger(params);
        PxMessage.success("编辑成功");
        emits("closeDialog");
        emits("queryTable");
      }
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/add-dialog.scss");
</style>
